<template>
  <div class="store-edit">
    <div class="v-title">发布商品</div>
    <a-form-model
      :model="model"
      ref="form"
      :rules="rules"
      :label-col="{ span: 3 }"
      :wrapper-col="{ span: 16 }"
      @submit="onSubmit"
      :colon="false"
    >
      <a-form-model-item label="商品标题" prop="title">
        <a-input v-model="model.title" placeholder="请输入商品标题" />
      </a-form-model-item>
      <a-form-model-item label="商品副标题" prop="sTitle">
        <a-input v-model="model.sTitle" placeholder="请输入商品副标题" />
      </a-form-model-item>
      <a-form-model-item label="行业" prop="cWork">
        <a-select v-model="model.cWork">
          <a-select-option
            v-for="item in config.c_types"
            :value="item.ID"
            :key="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="品类名" prop="cProduct">
        <a-select v-model="model.cProduct">
          <a-select-option
            v-for="item in currentProduct"
            :value="item.ID"
            :key="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="品牌或厂家">
        <a-input placeholder="品牌或厂家" v-model="model.brand" />
      </a-form-model-item>

      <a-form-model-item label="规格或型号">
        <a-input placeholder="规格或型号" v-model="model.norms" />
      </a-form-model-item>

      <a-form-model-item label="仓库信息">
        <a-input placeholder="仓库信息" v-model="model.stock" />
      </a-form-model-item>

      <a-form-model-item label="质量等级">
        <a-input placeholder="质量等级" v-model="model.quality" />
      </a-form-model-item>

      <a-form-model-item label="是否有质保书">
        <a-checkbox v-model="model.isQa"></a-checkbox>
      </a-form-model-item>

      <a-form-model-item label="商品图片">
        <UploadMul v-model="model.pic" text="商品图片" isObject />
      </a-form-model-item>

      <a-form-model-item label="商品详细说明">
        <Editor v-model="model.content" />
      </a-form-model-item>

      <a-form-model-item label=" ">
        <div class="action-wrapper">
          <a-button
            style="margin-right: 20px;"
            size="large"
            @click="$router.go(-1)"
          >
            取消
          </a-button>
          <a-button style="margin-right: 20px;" size="large" @click="preview"
            >预览</a-button
          >
          <a-button type="primary" size="large" htmlType="submit">
            提交审核
          </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import UploadMul from "@/components/upload/UploadMul";
import Editor from "@/components/Editor";
import { updateGoods } from "@/api/account";
import storage from "@/utils/storage";

export default {
  components: {
    Editor,
    UploadMul
  },
  data() {
    return {
      model: {
        title: "",
        sTitle: "",
        cWork: "",
        cProduct: "",
        brand: "",
        norms: "",
        quality: "",
        stock: "",
        pic: [],
        isQa: false,
        content: "",
        top: true,
        status: 1
      }
    };
  },
  created() {
    if (this.$route.query.id) {
      this.model = storage.getItem("GOODS_ITEM") || {};
    }
  },
  computed: {
    rules() {
      return {};
    },
    currentProduct() {
      let current = [];
      for (const item of this.config.c_types) {
        if (this.model.cWork == item.ID) {
          current = item.c_types;
        }
      }

      return current;
    }
  },
  methods: {
    async onSubmit(e) {
      e.preventDefault();
      this.model.userId = this.account.ID;
      await updateGoods(this.model);
      this.$message.info("发布商品成功");
      this.$router.go(-1);
    },
    preview() {
      storage.setItem("GOODS_ITEM", {
        users: {
          name: this.account.name
        },
        ...this.model
      });

      window.open(
        `${location.href.split("#")[0]}#/company/goods-preview/goods/preview`
      );
    }
  }
};
</script>

<style lang="less" scoped>
.store-edit {
  background: @white;
  padding: 20px;

  .v-title {
    margin: 0 0 20px;
  }
}
</style>
